<template name="home">
	<view class="indexC">
		<view :class="{ tapweek2: DistanceTop }" :style="'height: ' + statusBarHeight + 'px;'" v-show="DistanceTop"></view>
		<!-- <image src="$isHttp(SystemInfo.background)" class="response bgc theme_bg_color"></image> -->
		<!-- <z-paging ref="paging" v-model="dataList"  @query="queryList"  use-page-scroll :auto-clean-list-when-reload="false"> -->
			<!-- fixed  @scroll="scroll" -->
			<cu-custom :isdw="true">
				<block slot="dw">
					<view class="flex" @click="$goPage('../../pageB/CityPositioning/CityPositioning')">
						<image src="../../static/icon/dw11.png" style="width: 38rpx;height: 39rpx;" mode=""></image>
						<view class="dwt text-black">{{ vuex_city }}</view>
					</view>
				</block>
			</cu-custom>
			<view>
				<view class="center">
					<!-- <view class="flex margin-xs">
						<view class="cu-tag round">普通会员</view>
						<view class="cu-tag round">余额: 0.00</view>
					</view> -->
					<view class="flex margin-xs" @click="goPage('/pageB/me/coupon?tabcur=3')">
						<image src="../../static/icon/yhq.png" style="width: 38rpx;height: 34rpx;" mode=""></image>
						<view class="text-sm text-black">点我，传说在福利中心可以得到你想要的东西哦！</view>
					</view>

					<swiper class="screen-swiper1 margin-xs radius18" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">
						<swiper-item v-for="(item, index) in swiperList" :key="index" @click="$goPage(item.url)">
							<image :src="$isHttp(item.picture)" mode="aspectFill"></image>
							<video :src="$isHttp(item.picture)" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type == 'video'"></video>
						</swiper-item>
					</swiper>

					<view class="cu-list grid margin-xs radius18" style="background-color: rgba(255, 255, 255, 0.7);" :class="['col-' + gridCol, gridBorder ? '' : 'no-border']">
						<view class="cu-item" v-for="(item, index) in cuIconList" :key="index" v-if="index < gridCol * 2" @click="goPage(item.link)" >
							<!-- <view :class="['cuIcon-' + item.cuIcon, 'text-' + item.color]">
								<view class="cu-tag badge" v-if="item.badge != 0">
									<block v-if="item.badge != 1">{{ item.badge > 99 ? '99+' : item.badge }}</block>
								</view>
							</view> -->
							<image :src="`../../static/icon/home/${index+1}.jpg`" mode="" style="width: 76rpx;height: 76rpx;margin: auto;"></image>
							<text class="" style="color: #333;">{{ item.name }}</text>
						</view>
					</view>

					<!-- <van-grid square class="margin-xs radius" style="border-radius: 20rpx;">
					  <van-grid-item icon="photo-o" text="文字" v-for="(item,index) in 8" :key="index" />
					</van-grid> -->

					<view class="news  margin-xs">
						<!-- <view class="tp">
							最新公告
						</view> -->
						<view class="news1 radius12">
							<van-notice-bar left-icon="volume-o" color="#ed6a0c" backgroundColor="#ececec" :scrollable="true" :text="SystemInfo.information" />
						</view>
					</view>
					<!-- 优质商家，拼车列表，新店推荐，排行榜 -->
					<!-- 					<view class="flex justify-between margin-xs">
						<view class="">
							<view class="radius Scriptlist1 padding-sm"
								@click="$goPageShock('/pageB/home/QualityBusiness')">
								<view class="text-black text-bold">优质商家<text class="lg text-gray cuIcon-right"></text>
								</view>
								<view class="text-grey text-xs margin-top-xs">立即开启一段美妙<br>的征程</view>
								<image class="yzsj" src="../../static/icon/youzhi.png" mode=""></image>
							</view>
							<view @click="$goPageShock('/pageB/home/NewBusiness')"
								class="radius Scriptlist2 padding-sm">
								<view class="text-black text-bold">新店推荐<text class="lg text-gray cuIcon-right"></text>
								</view>
								<view class="text-grey text-xs margin-top-xs">新店推荐</view>
								<image class="new" src="../../static/icon/new.png" mode=""></image>
							</view>
						</view>
						<view class="">
							<view class="radius Scriptlist1 padding-sm"
								@click="$goPageShock('../../pageB/home/CarpoolList')">
								<view class="text-black text-bold">发车啦<text class="lg text-gray cuIcon-right"></text>
								</view>
								<view class="text-grey text-xs margin-top-xs">快来加入缺人的车队</view>
								<view class="action margin-top-xs">
									<view class="cu-avatar-group">
										<view class="cu-avatar round sm"
											style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
										</view>
										<view class="cu-avatar round sm"
											style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);">
										</view>
										<view class="cu-avatar round sm"
											style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);">
										</view>
										<view class="cu-avatar round sm"
											style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);">
										</view>
									</view>
									<text class="text-grey text-xl text-bold">· · ·</text>
								</view>
							</view>
							<view @click="$goPageShock('/pageB/home/RankingList')"
								class="radius Scriptlist2 padding-sm">
								<view class="text-black text-bold">排行榜单<text class="lg text-gray cuIcon-right"></text>
								</view>
								<view class="text-grey text-xs margin-top-xs">快来看看你的排名吧</view>
								<image class="phb" src="../../static/icon/phb.png" mode=""></image>
							</view>
						</view>
					</view> -->

					<view class="margin-xs dm" :style="{opacity: DistanceTop?0:1}">
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
							<view
								v-for="(item, index) in HostScriptList"
								:key="index"
								@click="$goPage('/pageB/script/info?id=' + item.id)"
								class="cu-card dm-item scroll-view-item_H radius"
							>
								<image :src="$isHttp(item.picture)" mode="aspectFill"></image>
								<view class="text">
									<view class="tj text-red text-sm padding_le_10 padding_top_5">热门推荐</view>
									<view class="text-sm text-black padding_le_10 text-cut margin-top-xs">{{ item.name }}</view>
									<view class="text-sm text-grey padding_le_10 text-cut margin-top-xs">{{ item.desc }}</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			
			<view id="dateWeek" :class="{ tapweek: DistanceTop, tapweek1: !DistanceTop }" :style="{ top: statusBarHeight + 'px' }" style="background-color: #fff;" >
				<view class="padding-lr flex align-center justify-start bg-white ">
					<view class="text-bold text-lg " style="width: 224rpx;height: 42rpx;">在拼车队</view>
					<van-search :value="search" @change="search=$event.detail" :placeholder="bussOrplay?'请输入商家名搜索':'请输入剧本名搜索'" :clearable="true" use-action-slot  @search="onSearch">
						<view slot="label">
							<view @click="bussOrplay=!bussOrplay">
								<view class="text-black" style="line-height: 68rpx;" v-show="bussOrplay">商家<text class="sm text-black cuIcon-order"></text></view>
								<view class="text-black" style="line-height: 68rpx;" v-show="!bussOrplay">剧本<text class="sm text-black cuIcon-order"></text></view>
							</view>
						</view>
					</van-search>
					<!-- <view class="margin-left-sm" style="width: 420rpx;height: 68rpx;">
						<form action="">
							<view class="flex justify-start align-center radius12 solids padding-lr-xs bg-gray">
								<view @click="bussOrplay=!bussOrplay" style="width: 88rpx;">
									<view class="text-black" style="line-height: 68rpx;" v-show="bussOrplay">商家<text class="sm text-black cuIcon-order"></text></view>
									<view class="text-black" style="line-height: 68rpx;" v-show="!bussOrplay">剧本<text class="sm text-black cuIcon-order"></text></view>
								</view>
								<view class="margin-left-xs"><input type="text" v-model="search" :placeholder="bussOrplay?'请输入商家名搜索':'请输入剧本名搜索'" confirm-type="搜索" adjust-position="false" /></view>
							</view>
							
						</form>
					</view> -->
				</view>
				<!-- <view class="op">
					<sl-filter :themeColor="themeColor" :menuList="menuList" @result="result">
						<van-datetime-picker
							type="date"
							:value="currentDate"
							@change="onInput"
							:min-date="minDate"
							:formatter="formatter"
							visible-item-count="3"
							toolbar-class="class1"
						/>
					</sl-filter>
				</view> -->
				<scroll-view class="scroll-view_H scroll-view1 theme_vice_color" :class="{ tapweek8: DistanceTop, tapweek9: !DistanceTop }" scroll-x >
					<block v-for="(item, index) in dateArr" :key="index">
						<div class="flex-box" @click="selectDateEvent(index, item)" :style="{ 'border-bottom': index == dateActive ? '2px solid  #fbbd08' : '' }">
							<view class="date-box" :style="{ color: index == dateActive ? selectedTabColor : '#e1e1e5' }">
								<text style="font-weight: bold;">{{ item.week }}{{ index == dateActive ? '(' + count + ')' : '' }}</text>
								<text>{{ item.date }}</text>
							</view>
						</div>
					</block>
				</scroll-view>
			</view>

			<view class="grarg" style="background-color: #fff;">
				<view class="cu-card article">
					<view
						@click="$goPage('../../pageB/script/AppointmentProgress?id=' + item.id)"
						class="itemCardui shadow padding-sm"
						v-for="(item, index) in dataList"
						:key="index"
					>
						<!-- <image src="../../static/icon/zd.png" class="zd" mode=""></image> -->
						<view class="flex justify-start">
							<image :src="$isHttp(item.picture)" lazy-load style="width: 210rpx;height: 290rpx;border-radius: 10rpx;" mode="aspectFill"></image>
							<view class=" margin-left-sm" style="width: 520rpx;">
								<view class="flex justify-start margin-top-xs">
									<view class="text-bold text-black">{{ item.name }}</view>
									<!-- <view class="cu-tag bg-yellow  sm round margin-left-sm">标签666</view> -->
								</view>
								<view class="margin-top-sm">
									<view
										v-for="(item1, index1) in item.smallclass"
										:key="index1"
										class="cu-tag sm round"
										style="background-color: #797979;color: #ffffff;"
										v-if="index1 < 6"
									>
										{{ item1.small_name }}
									</view>
								</view>
								<view class="margin-top-sm">
									<view class="cu-tag sm round">时间：{{ item.date }}【{{ item.week }}】{{ item.time }}</view>
								</view>
								<view class="margin-top-sm flex justify-start" style="color: #4a494c;">
									<view class="flex justify-start align-center">
										<text class="cuIcon-friendfill text-yellow"></text>
										<view class="text-sm margin-left-xs">{{ item.sex_type }}</view>
									</view>
									<view class="flex justify-start align-center margin-left-sm">
										<text class="cuIcon-timefill text-yellow"></text>
										<view class="text-sm margin-left-xs">{{ item.hour }}小时</view>
									</view>
									<view class="flex justify-start align-center margin-left-sm">
										<text class="cuIcon-selectionfill text-yellow"></text>
										<view class="text-sm margin-left-xs">{{ item.difficulty }}</view>
									</view>
								</view>
								<view class="flex justify-between  margin-top-sm">
									<view class="flex align-start" style="color: #4a494c;">
										<view class="text-sm text-cut" style="width: 300rpx;">
											门店：
											<text style="text-decoration: underline;" class="" @click.stop="$goPage('/pageB/business/info?id=' + item.storeId)">{{ item.storeName }}</text>
										</view>
									</view>
									<view class="cu-btn bg-yellow sm round">
										组队中
										<text class="">{{ item.Joincount }}/{{ item.people }}{{item.temporary>0?'+'+item.temporary:''}}</text>
									</view>
								</view>
							</view>
						</view>
						<view v-if="item.remark != null && item.remark != ''">
							<view class="margin-top-sm text-black bg-white radius12 text-cut">
								<text class="cu-tag bg-red radius12">备注</text>
								<text class="padding-lr-xs">{{ item.remark }}</text>
							</view>
						</view>
					</view>
					<view
						class=" text-center radius12 padding-top-sm text-grey"
					>
						{{loading}}
					</view>
					<view style="height: 1100rpx;"></view>
				</view>
			</view>

			<!-- 设置自定义emptyView组件，非必须。空数据时会自动展示空数据组件，不需要自己处理 -->
<!-- 			<empty-view slot="empty"></empty-view>
		</z-paging> -->
		
		<!-- 客服悬浮按钮 -->
		<drag-button  :isDock="true" :text="''" :existTabBar="true" @btnClick="CusSer">
			<block slot="content">
				<view class='text-center' >
					<image src="/static/icon/wx.png" style="width:80rpx;height:80rpx"></image>
				</view>
				<view  class="text-xs cu-tag radius sm bg-grey">
					剧梦剧本杀群
				</view>
			</block>
		</drag-button>
		
		<!-- 客服二维码弹窗 -->
		<van-popup round :show="modelName==='CusSer'" @close="modelName='';CustomerId=-1">
			<view class="popup">
				<view v-if="CustomerId==-1">
					<view class="title">
						添加客服
					</view>
					<view class="content">
						添加一下任意客服微信，进剧本杀群，组局侃本更方便~
					</view>
					
					<view class="nt1" v-for="(item,index) in CustomerList" :key="index" v-if="index<2" @click="selectCus(index)">
						<text class="cu-avatar lg round margin-left margin-right"
							:style="'background-image: url('+$isHttp(item.head_por)+');'"></text>客服{{item.name}}<text class="lg text-gray cuIcon-right"></text>
					</view>
				</view>
				<view v-if="CustomerId!=-1">
					<view class="title">
						<text class="cu-avatar lg round margin-lr-xs"
							:style="'background-image: url('+$isHttp(CustomerList[CustomerId].head_por)+');'"></text>客服{{CustomerList[CustomerId].name}}
					</view>
					<view class="content text-center">
						微信号：{{CustomerList[CustomerId].contactInfo}}
					</view>
					<button class="cu-btn round bg-cyan flex justify-center"  @click="$copy(CustomerList[CustomerId].contactInfo)">点击复制</button>
					<image style="width:420rpx;height:420rpx" :src="$isHttp(CustomerList[CustomerId].ewmImg)"></image>
					
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
import { dateData, timeData, timeStamp, currentTime } from '@/components/utils/date.js';
import slFilter from '@/components/sl-filter/sl-filter.vue';
import { shareMixins} from '@/common/mixins/share.js'
// import data from '@/common/data.js'; //筛选菜单数据
export default {
	//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
	mixins: [shareMixins],
	name: 'home',
	components: {
		slFilter
	},
	data() {
		return {
			currentDate: new Date().getTime(),
			minDate: new Date().getTime(),

			cardCur: 0,
			swiperList: [],
			dotStyle: false,
			towerStart: 0,
			direction: '',
			SystemInfo: '',

			value: '',
			dataList: [],

			color: '#292929',
			hasChoose: false,

			dateArr: [], //日期数据
			dateActive: 0, //选中的日期索引
			selectedTabColor: '#fbbd08', // 日期栏选中的颜色
			// oldScrollLeft:200,

			count: 0,
			DistanceTop: false,
			statusBarHeight: '',

			cuIconList: [
				{
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 0,
					link: '/pageList/script/script',
					name: '找剧本'
				},
				{
					cuIcon: 'upstagefill',
					color: 'orange',
					badge: 0,
					link: '/pageB/home/RankingList',
					name: '排行榜'
				},
				{
					cuIcon: 'crownfill',
					color: 'olive',
					badge: 0,
					link: '/pageB/home/QualityBusiness',
					name: '优质商家'
				},
				{
					cuIcon: 'shopfill',
					color: 'green',
					badge: 0,
					link: '/pageB/home/NewBusiness',
					name: '新店推荐'
				},
				{
					cuIcon: 'samefill',
					color: 'cyan',
					badge: 0,
					link: '/pageList/business/business',
					name: '找店家'
				},
				{
					cuIcon: 'formfill',
					color: 'blue',
					badge: 0,
					link: '',
					name: '找发行'
				},
				// {
				// 	cuIcon: 'formfill',
				// 	color: 'blue',
				// 	badge: 0,
				// 	link: '/pageB/test/test',
				// 	name: '测试页'
				// },
				{
					cuIcon: 'roundaddfill',
					color: 'purple',
					badge: 0,
					link: '/pageB/business/StoreEntry',
					name: '商家入驻'
				},
				{
					cuIcon: 'lightfill',
					color: 'mauve',
					badge: 0,
					link: '/pageB/home/CarpoolList',
					name: '紧急车队'
				}
			],
			HostScriptList: [],
			gridCol: 4,
			gridBorder: false,

			date:this.$dateFormat(new Date().getTime(),'Y-m-d'),
			bussOrplay:true,
			search:'',
			themeColor: '#000000',
			filterResult: '',
			menuList: [
				{
					title: '剧本类型',
					detailTitle: '请选择剧本类型（可多选）',
					isMutiple: true,
					key: 'playType',
					detailList: [
						{
							title: '不限',
							value: ''
						},
						{
							title: '城限',
							value: '55'
						},
						{
							title: '盒装',
							value: '56'
						},
						{
							title: '独家',
							value: '57'
						},
						{
							title: '实景',
							value: '58'
						}
					]
				},
				{
					title: '时间筛选',
					key: 'time',
					isSort: 'customize',
					detailList: [
						{
							title: '时间筛选',
							value: ''
						}
					]
				}
			],
		
			modelName:'',
			CustomerList:[],
			CustomerId:-1,
			
			pageNo:1,
			loading:''
		};
	},
	onLoad() {
		this.setOnload();
		uni.authorize({
			scope: 'scope.userLocation',
			success: res => {
				//1.1 允许授权
				this.getLocation();
			},
			fail: res => {
				//1.2 拒绝授权
				uni.showModal({
					content: '检测到您没打开位置权限，为您更好的体验，请去设置打开？',
					confirmText: '确认',
					cancelText: '取消',
					success: res => {
						if (res.confirm) {
							uni.openSetting({
								success: res => {
									this.getLocation();
									// if(this.vuex_user.id==undefined){
									this.login();
									// }
								}
							});
						} else {
							console.log('取消');
							return false;
						}
					}
				});
				return false;
			}
		});
		this.queryList()
		this.$u.api.getHomeBanner().then(res => {
			this.swiperList = res.data;
		});
		this.$u.api.SystemInfo().then(res => {
			this.SystemInfo = res.data;
		});
		this.$u.api.getHostScriptList().then(res => {
			this.HostScriptList = res.data;
		});
		this.TowerSwiper('swiperList');
		this.getPlayClass();
		const res = uni.getSystemInfoSync();
		this.statusBarHeight = res.statusBarHeight;

		//判断是否登录
		this.$u.api
			.getUserIsbussiness({
				userId: this.vuex_user.id ? this.vuex_user.id : ''
			})
			.then(res => {
				if (res.code == 401) {
					console.log(res);
					this.$login();
				}
			});
	},
	onPageScroll(e){
		if(e.scrollTop>=694){
			this.DistanceTop = true;
		}else{
			this.DistanceTop = false;
		}
		
	},
	onPullDownRefresh(e){
		this.pageNo=1
		this.queryList()
		setTimeout(()=>{
			uni.stopPullDownRefresh();
		},500)
	},
	onReachBottom(){
		this.queryList()
	},
	methods: {
		onSearch(){
			this.pageNo=1
			this.queryList()
		},

		goPage(link) {
			if (link.split('/')[1]=='pageList') {
				uni.switchTab({
					url:link
				})
			} else {
				this.$goPageIsLoginOk(link);
			}
		},
		queryList() {
			if(this.loading=='没有更多了...' && this.pageNo!==1){
				return
			}
			this.loading='加载中...'
			this.$u.api
				.getPinList({
					page: this.pageNo,
					number: 10,
					date: this.dateArr[this.dateActive].date,
					city: this.vuex_city,
					arr:this.filterResult.playType==undefined?'':this.filterResult.playType,
					name:!this.bussOrplay?this.search:'',
					store_Name:this.bussOrplay?this.search:'',
				})
				.then(res => {
					if(res.code===200){
						this.loading=''
						if(this.pageNo===1){
							this.dataList=[]
						}
						this.dataList=this.dataList.concat(res.data.list)
						this.count = res.data.count;
						this.pageNo++
						if(this.dataList.length==this.count){
							this.loading='没有更多了...'
						}
					}
				});
		},
		setOnload() {
			this.dateArr = dateData(); // 日期栏初始化
		},
		selectDateEvent(index, item) {
			this.dateActive = index;
			this.pageNo=1
			this.queryList()
		},
		getLocation() {
			if (this.vuex_city == '定位中...' || this.vuex_city == undefined) {
				uni.getLocation({
					type: 'wgs84', //'gcj02', //返回可以用于uni.openLocation的经纬度
					success: res => {
						let latitude = this.$addNum(res.latitude, 0.001276);
						let longitude = this.$addNum(res.longitude, 0.006256);
						this.$u.vuex('vuex_latitude', latitude);
						this.$u.vuex('vuex_longitude', longitude);

						uni.request({
							header: {
								'Content-Type': 'application/text'
							},
							//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
							url:
								'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
								longitude +
								',' +
								latitude +
								'&key=7b7fbe6751d2491c692a1728a6c7afa4&radius=1000&extensions=all',
							success: re => {
								if (re.statusCode === 200) {
									let citydata = re.data.regeocode.addressComponent.city;
									citydata = citydata.includes('市') ? citydata.replace(/市/, ' ').split(' ')[0] : citydata;
									// console.log("获取中文街道地理位置成功", this.citydata)
									this.$u.vuex('vuex_city', citydata);
								}
							},
							fail: () => {
								this.$textToast('定位失败，请打开手机定位');
							}
						});
					}
				});
			}
		},
		DotStyle(e) {
			this.dotStyle = e.detail.value;
		},
		// towerSwiper
		// 初始化towerSwiper
		TowerSwiper(name) {
			let list = this[name];
			for (let i = 0; i < list.length; i++) {
				list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2));
				list[i].mLeft = i - parseInt(list.length / 2);
			}
			this.swiperList = list;
		},

		getPlayClass() {
			this.$u.api.getPlayClass().then(res => {
				var keyMap = {
					big_name: 'title',
					smallClasses: 'detailList'
				};
				var keyMap1 = {
					small_name: 'title',
					id: 'value'
				};
				for (var i = 0; i < res.data.length; i++) {
					var obj = res.data[i];
					for (var key in obj) {
						obj.type = 'custom';
						obj.key = 'custom' + (i + 1);
						obj.isMutiple = true;
						var newKey = keyMap[key];
						if (newKey) {
							obj[newKey] = obj[key];
							delete obj[key];
						}
					}
					for (var j = 0; j < res.data[i].detailList.length; j++) {
						var obj1 = res.data[i].detailList[j];
						for (var key1 in obj1) {
							// obj.btnUrl = "./orderDetail?order_no=" + obj.department;
							var newKey1 = keyMap1[key1];
							if (newKey1) {
								obj1[newKey1] = obj1[key1];
								delete obj1[key1];
							}
						}
					}
					res.data[i].isMutiple = false;
				}
				this.$u.vuex('vuex_menuList', res.data);
			});
		},
		//客服悬浮按钮点击事件
		CusSer() {
			this.modelName='CusSer'
			this.$u.api.getCustomerInfo().then(res=>{
				this.CustomerList=res.data
			})
		},
		selectCus(index){
			this.CustomerId=index
		},
	},
	watch: {
		// 监听定位城市变化，更新拼车列表
		city: function(newVal, oldVal) {
			if (newVal !== oldVal) {
				this.$refs.paging.reload();
			}
		}
	},
	computed: {
		city() {
			return this.vuex_city;
		},
		style() {
			var StatusBar = this.StatusBar;
			// var CustomBar = this.CustomBar;
			// var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
			var style = `top:${StatusBar}px;`;
			return style;
		},
		CustomBar1(){
			return this.CustomBar
		}
	}
};
</script>

<style lang="scss" scoped>
.op {
	&/deep/.class1 {
		display: none;
	}
}

// 主持人
.supporter {
	background-color: #fff;
}

.padding_top_5 {
	padding-top: 5rpx;
}

.padding_le_10 {
	padding-left: 10rpx;
}

.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}

.scroll-view-item_H {
	display: inline-block;
}

// DM推荐
.dm {
	width: auto;

	.dm-item {
		width: 205rpx;
		height: 420rpx;
		background-color: #fff;
		margin-left: 15rpx;
		overflow: hidden;

		&:nth-child(1) {
			margin-left: 0;
		}

		image {
			width: 100%;
			height: 75%;
		}

		.text {
			height: 25%;
			position: relative;

			.tj {
				height: 40rpx;
				width: 124rpx;
				border-radius: 0 100rpx 0 0;
				background-color: #fff;
				position: absolute;
				left: 0;
				top: -40rpx;
			}

			.tj1 {
				height: 30rpx;
				width: auto;
				border-radius: 10rpx;
				background-color: rgba($color: #939393, $alpha: 0.6);
				position: absolute;
				left: 10rpx;
				top: -60rpx;
			}
		}
	}
}

.screen-swiper2 {
	height: 160rpx;
	overflow: hidden;

	swiper-item {
		box-sizing: border-box;
	}
}

.screen-swiper2 image,
.screen-swiper2 video,
.swiper-item image,
.swiper-item video {
	width: 100rpx;
	display: block;
	height: 130rpx;
	margin: 0;
	pointer-events: none;
	border-radius: 10rpx;
}

// 最新情报
.news {
	position: relative;
	height: 80rpx;

	.tp {
		width: 120rpx;
		height: 40rpx;
		background-color: #30251d;
		color: #e1e1e1;
		text-align: center;
		line-height: 40rpx;
		font-size: 24rpx;
		border-radius: 15rpx 0 15rpx 0;
		position: absolute;
		top: -20rpx;
		left: 10rpx;
	}

	.news1 {
		height: 100%;
		font-size: 24rpx;
		overflow: hidden;
		background-color: rgba($color: #fff, $alpha: 0.9);
	}
}

.Scriptlist {
	width: 340rpx;
	height: 350rpx;
	background-color: rgba($color: #fff, $alpha: 0.9);
	position: relative;

	.bg {
		width: 100%;
		height: 262rpx;
		position: absolute;
		bottom: 0;
		left: 0;
	}
}

.Scriptlist1 {
	width: 340rpx;
	height: 195rpx;
	background-color: rgba($color: #fff, $alpha: 0.9);
	position: relative;

	.yzsj {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		left: 214rpx;
		top: 46rpx;
		z-index: 1;
		opacity: 0.6;
	}
}

.Scriptlist2 {
	width: 340rpx;
	height: 145rpx;
	margin-top: 10rpx;
	background-color: rgba($color: #fff, $alpha: 0.9);
	position: relative;

	.phb {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		left: 214rpx;
		top: 22rpx;
		z-index: 1;
		opacity: 0.6;
	}

	.new {
		width: 121rpx;
		height: 47rpx;
		position: absolute;
		left: 197rpx;
		top: 45rpx;
		z-index: 1;
		opacity: 0.6;
	}
}

.center {
	height: auto;
	margin-top: 15rpx;
	padding: 0 20rpx;

	.screen-swiper1 {
		height: 347rpx;
		overflow: hidden;
	}

	.screen-swiper1 image,
	.screen-swiper1 video,
	.swiper-item image,
	.swiper-item video {
		width: 100%;
		display: block;
		height: 100%;
		margin: 0;
		pointer-events: none;
	}
}

.dwt {
	font-size: 28rpx;
	font-weight: 600;
}

.indexC {
	position: relative;
	min-height: 100vh;
	height: auto;
	background-color: #fff;
}

.page {
	height: 100vh;
}

.bgc {
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
}

.zd {
	position: absolute;
	top: 0;
	left: 0;
	width: 60rpx;
	height: 55rpx;
	z-index: 1;
}

// .grarg {
// 	position: absolute;
// 	top: 225rpx;
// 	bottom: 100rpx;
// }

.box_whbrc {
	width: 90rpx;
	height: 60rpx;
	border-radius: 30rpx;
	// background-color: #cfa526;
	margin-right: 20rpx;
	text-align: center;
	line-height: 60rpx;
}

.bgc_cfa526 {
	background-color: #cfa526;
}

.scroll-view1 {
	width: 100%;
	white-space: nowrap;
	height: 150rpx;
	position: relative;

	&::after {
		// background: #e5e5e5;
		content: '';
		display: block;
		width: 100%;
		height: 2rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		transform: scaleY(0.5);
	}

	.flex-box {
		display: inline-block;
		height: 120rpx;
		width: 25%;
		margin: 0 7rpx 0 7rpx;
		box-sizing: border-box;

		&.active {
			.date-box {
				border: none;

				.days {
					font-weight: bold;
					color: #a6a6a6;
				}

				.date {
					font-weight: bold;
					color: #a6a6a6;
				}
			}
		}

		.date-box {
			border: none;
			display: flex;
			height: 100rpx;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			font-size: 30upx;
			color: rgba(129, 129, 129, 1);

			.date {
				font-weight: bold;
				color: #a6a6a6;
				font-size: 30upx;
			}
		}
	}
}

@keyframes myfirst {
	// from {}

	// to {
	// 	width: 100%;
	// 	// border-radius: 0 0 12rpx 12rpx;
	// 	background-color: #2f2f2f;
	// }
	0% {
		width: 92%;
		// border-radius: 0 0 12rpx 12rpx;
		background-color: #ffffff;
	}
	25% {
		width: 94%;
		// border-radius: 0 0 12rpx 12rpx;
		background-color: #ffffff;
	}
	50% {
		width: 96%;
		// border-radius: 0 0 12rpx 12rpx;
		background-color: #ffffff;
	}
	75% {
		width: 98%;
		// border-radius: 0 0 12rpx 12rpx;
		background-color: #ffffff;
	}
	100% {
		width: 100%;
		// border-radius: 0 0 12rpx 12rpx;
		background-color: #ffffff;
	}
}

.tapweek {
	// animation: myfirst 0.4s;
	// animation-fill-mode: forwards;

	z-index: 100;
	position: sticky;
	top: 0;

}

.tapweek1 {
	z-index: 100;
	position: sticky;
	top: 0;
}

.tapweek2 {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: #ffffff;
	z-index: 100;
	animation: myfirst 0.4s;
	animation-fill-mode: forwards;
}

.tapweek8 {
	height: 127rpx;
	animation: myfirst8 0.4s;
	animation-fill-mode: forwards;
}

.tapweek9 {
	width: 690rpx;
	height: 127rpx;
	margin: 0 auto;
	border-radius: 12rpx;
	animation: myfirst9 0.4s;
	animation-fill-mode: forwards;

}
@keyframes myfirst8 {
	from {}

	to {
		width: 100%;
		// background-color: #fff;
	}
	
}
@keyframes myfirst9 {
	from {}

	to {
		width: 690rpx;
		background-color: #2f2f2f;
	}
	
}
.status_bar {
	width: 100%;
}

.itemCardui {
	width: 690rpx;
	margin: 12rpx auto;
	border-radius: 12rpx;
	background-color: #ffffff;
	position: relative;
	box-shadow: 0px 0px 15rpx #bcbcbc;
}

.popup {
		width: 500rpx;
		height: auto;
		padding: 30rpx 40rpx;

		.title {
			width: 100%;
			text-align: center;
			font-size: 36rpx;
		}

		.content {
			margin-top: 20rpx;
		}

		.nt1 {
			margin-top: 10rpx;
			background-color: #f5f5f5;
			border-radius: 20rpx;
			padding: 20rpx 10rpx 20rpx 0;
			font-size: 32rpx;
			
		}
	}
</style>
